<template>
    <div class="carbon-overview">
        <div class="page-title">碳排放综合展示</div>

        <div class="map-container" ref="mapContainer"></div>

        <div class="overview-cards">
            <div class="overview-card">
                <div class="card-title">产业园总碳排放</div>
                <div class="card-value">347.5 吨</div>
                <div class="card-change decrease">-4.8% 同比</div>
            </div>
            <div class="overview-card">
                <div class="card-title">平均碳排放强度</div>
                <div class="card-value">7.6 kg/m²</div>
                <div class="card-change decrease">-5.2% 同比</div>
            </div>
            <div class="overview-card">
                <div class="card-title">清洁能源使用率</div>
                <div class="card-value">24.0%</div>
                <div class="card-change increase">+3.5% 同比</div>
            </div>
            <div class="overview-card">
                <div class="card-title">碳减排目标完成率</div>
                <div class="card-value">72.5%</div>
                <div class="card-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 72.5%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="data-panels">
            <div class="panel building-info">
                <h3>建筑基本信息</h3>
                <div class="panel-content" v-if="selectedBuilding">
                    <p><strong>名称:</strong> {{ selectedBuilding.name }}</p>
                    <p><strong>位置:</strong> {{ selectedBuilding.location }}</p>
                    <p><strong>面积:</strong> {{ selectedBuilding.area }} m²</p>
                    <p><strong>用途:</strong> {{ selectedBuilding.purpose }}</p>
                    <p><strong>建造年份:</strong> {{ selectedBuilding.buildYear }}</p>
                    <p><strong>楼层数:</strong> {{ selectedBuilding.floors }}</p>
                    <p><strong>使用率:</strong> {{ selectedBuilding.occupancy }}</p>
                    <p><strong>能效等级:</strong> {{ selectedBuilding.energyRating }}</p>
                </div>
                <div class="panel-content" v-else>
                    <p>请在地图上选择灵璧县人工智能产业园</p>
                </div>
            </div>

            <div class="panel energy-usage">
                <h3>用能情况</h3>
                <div class="panel-content" v-if="selectedBuilding">
                    <p><strong>电力消耗:</strong> {{ selectedBuilding.electricity }} kWh</p>
                    <p><strong>燃气消耗:</strong> {{ selectedBuilding.gas }} m³</p>
                    <p><strong>总能耗:</strong> {{ selectedBuilding.totalEnergy }} kWh</p>
                    <p><strong>高峰用电时段:</strong> {{ selectedBuilding.peakHours }}</p>
                    <p><strong>清洁能源占比:</strong> {{ selectedBuilding.cleanEnergyRatio }}</p>
                </div>
                <div class="panel-content" v-else>
                    <p>请在地图上选择建筑物</p>
                </div>
            </div>

            <div class="panel carbon-emission">
                <h3>碳排放量</h3>
                <div class="panel-content" v-if="selectedBuilding">
                    <p><strong>总碳排放:</strong> {{ selectedBuilding.carbonEmission }} 吨</p>
                    <p><strong>碳排放强度:</strong> {{ selectedBuilding.carbonIntensity }} kg/m²</p>
                    <p><strong>同比变化:</strong> <span
                            :class="selectedBuilding.yearOnYearChange < 0 ? 'decrease' : 'increase'">
                            {{ selectedBuilding.yearOnYearChange > 0 ? '+' : '' }}{{ selectedBuilding.yearOnYearChange
                            }}%
                        </span></p>
                    <p><strong>减排措施:</strong></p>
                    <ul class="measures-list">
                        <li v-for="(measure, index) in selectedBuilding.reductionMeasures" :key="index">
                            {{ measure }}
                        </li>
                    </ul>
                </div>
                <div class="panel-content" v-else>
                    <p>请在地图上选择建筑物</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'

export default defineComponent({
    name: 'CarbonOverview',
    setup() {
        const mapContainer = ref<HTMLElement | null>(null)
        let map: any = null
        let heatmap: any = null
        const selectedBuilding = ref<any>(null)

        const parkData = ref({
            totalEmission: 347.5,
            yearOnYearChange: -4.8,
            averageIntensity: 7.6,
            intensityChange: -5.2,
            cleanEnergyRatio: 24.0,
            cleanEnergyChange: 3.5,
            targetCompletion: 72.5
        });

        const initMap = () => {
            if (!mapContainer.value) return

            map = new window.AMap.Map(mapContainer.value, {
                zoom: 15,
                center: [117.548272, 33.557601], // 灵璧县人工智能产业园坐标
                viewMode: '3D'
            })

            map.addControl(new window.AMap.ToolBar())
            map.addControl(new window.AMap.Scale())

            const marker = new window.AMap.Marker({
                position: [117.548272, 33.557601],
                title: '灵璧县人工智能产业园'
            })

            map.add(marker)

            // 使用插件方式加载热力图
            map.plugin(['AMap.HeatMap'], function () {
                // 创建热力图实例
                heatmap = new window.AMap.HeatMap(map, {
                    radius: 25,
                    opacity: [0, 0.8]
                })

                // 设置热力图数据
                const heatmapData = {
                    max: 100,
                    data: generateHeatmapData()
                }

                heatmap.setDataSet(heatmapData)
            })

            addBuildingMarkers()
        }

        const generateHeatmapData = () => {
            const data = []
            const center = [117.548272, 33.557601]

            for (let i = 0; i < 20; i++) {
                const lng = center[0] + (Math.random() - 0.5) * 0.01
                const lat = center[1] + (Math.random() - 0.5) * 0.01
                const value = Math.floor(Math.random() * 100)

                data.push({
                    lng,
                    lat,
                    count: value
                })
            }

            return data
        }

        const addBuildingMarkers = () => {
            const buildings = [
                {
                    position: [117.547272, 33.556601],
                    name: '灵璧县人工智能产业园1号楼',
                    data: {
                        name: '灵璧县人工智能产业园1号楼',
                        location: '灵璧县产业园东区',
                        area: 8500,
                        purpose: '办公与研发',
                        electricity: 65000,
                        gas: 3000,
                        totalEnergy: 85000,
                        carbonEmission: 42.5,
                        carbonIntensity: 5.0,
                        yearOnYearChange: -6.2,
                        buildYear: 2019,
                        floors: 12,
                        occupancy: '88%',
                        energyRating: 'A',
                        peakHours: '9:00-18:00',
                        cleanEnergyRatio: '22%',
                        reductionMeasures: ['太阳能面板', '智能照明系统', '节能窗户']
                    }
                },
                {
                    position: [117.549272, 33.558601],
                    name: '灵璧县人工智能产业园2号楼',
                    data: {
                        name: '灵璧县人工智能产业园2号楼',
                        location: '灵璧县产业园北区',
                        area: 10000,
                        purpose: '研发中心',
                        electricity: 88000,
                        gas: 4500,
                        totalEnergy: 110000,
                        carbonEmission: 55.0,
                        carbonIntensity: 5.5,
                        yearOnYearChange: -4.8,
                        buildYear: 2020,
                        floors: 10,
                        occupancy: '92%',
                        energyRating: 'A+',
                        peakHours: '8:00-20:00',
                        cleanEnergyRatio: '28%',
                        reductionMeasures: ['地源热泵', '智能楼宇管理系统', '雨水回收利用']
                    }
                },
                {
                    position: [117.548872, 33.557101],
                    name: '灵璧县人工智能产业园生产基地',
                    data: {
                        name: '灵璧县人工智能产业园生产基地',
                        location: '灵璧县产业园中区',
                        area: 15000,
                        purpose: '智能制造',
                        electricity: 150000,
                        gas: 10000,
                        totalEnergy: 190000,
                        carbonEmission: 95.0,
                        carbonIntensity: 6.3,
                        yearOnYearChange: -2.1,
                        buildYear: 2018,
                        floors: 3,
                        occupancy: '95%',
                        energyRating: 'B+',
                        peakHours: '7:00-22:00',
                        cleanEnergyRatio: '15%',
                        reductionMeasures: ['余热回收系统', '变频设备', '节能生产线']
                    }
                },
                {
                    position: [117.547872, 33.558201],
                    name: '灵璧县人工智能产业园数据中心',
                    data: {
                        name: '灵璧县人工智能产业园数据中心',
                        location: '灵璧县产业园北区',
                        area: 5000,
                        purpose: '数据处理与存储',
                        electricity: 220000,
                        gas: 1000,
                        totalEnergy: 225000,
                        carbonEmission: 112.5,
                        carbonIntensity: 22.5,
                        yearOnYearChange: -3.2,
                        buildYear: 2021,
                        floors: 4,
                        occupancy: '99%',
                        energyRating: 'B',
                        peakHours: '全天',
                        cleanEnergyRatio: '25%',
                        reductionMeasures: ['液冷技术', '智能调度系统', '高效UPS']
                    }
                },
                {
                    position: [117.546872, 33.557401],
                    name: '灵璧县人工智能产业园创新中心',
                    data: {
                        name: '灵璧县人工智能产业园创新中心',
                        location: '灵璧县产业园西区',
                        area: 7500,
                        purpose: '创新孵化',
                        electricity: 60000,
                        gas: 5000,
                        totalEnergy: 85000,
                        carbonEmission: 42.5,
                        carbonIntensity: 5.7,
                        yearOnYearChange: -7.5,
                        buildYear: 2020,
                        floors: 8,
                        occupancy: '85%',
                        energyRating: 'A',
                        peakHours: '8:30-19:30',
                        cleanEnergyRatio: '30%',
                        reductionMeasures: ['绿色屋顶', '智能照明', '节能电梯']
                    }
                }
            ]

            buildings.forEach(building => {
                const marker = new window.AMap.Marker({
                    position: building.position,
                    title: building.name,
                    label: {
                        content: building.name,
                        direction: 'top'
                    }
                })

                marker.on('click', () => {
                    selectedBuilding.value = building.data
                })

                map.add(marker)
            })
        }

        const loadAMapAPI = () => {
            if (window.AMap) {
                initMap()
                return
            }

            // 添加安全配置
            const configScript = document.createElement('script')
            configScript.type = 'text/javascript'
            configScript.text = `window._AMapSecurityConfig = { securityJsCode: 'b3cbc70e52258a312781c91a22266789' }`
            document.head.appendChild(configScript)

            // 加载高德地图API，确保包含HeatMap插件
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = 'https://webapi.amap.com/maps?v=2.0&key=87542abf572342dd42f197d72f4bd143&plugin=AMap.HeatMap&callback=initAMap'
            document.head.appendChild(script)

            window.initAMap = () => {
                initMap()
            }
        }

        onMounted(() => {
            loadAMapAPI()
        })

        onUnmounted(() => {
            if (map) {
                map.destroy()
                map = null
            }
        })

        return {
            mapContainer,
            selectedBuilding,
            parkData
        }
    }
})
</script>

<style scoped>
.carbon-overview {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.page-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.map-container {
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.overview-cards {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.overview-card {
    width: 23%;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.card-change {
    font-size: 14px;
}

.increase {
    color: #f5222d;
}

.decrease {
    color: #52c41a;
}

.card-progress {
    margin-top: 10px;
}

.progress-bar {
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #1890ff;
}

.measures-list {
    margin: 5px 0 0 20px;
    padding: 0;
}

.measures-list li {
    margin-bottom: 5px;
}

.data-panels {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.panel {
    width: 32%;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.panel h3 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.panel-content {
    line-height: 1.6;
}
</style>